<template>
  <TreeSelect
    v-model:value="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
    tree-node-filter-prop="label"
  >
    <template #title="{ value: val, label }">
      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
      <template v-else>{{ label }}</template>
    </template>
  </TreeSelect>
</template>

<script lang="ts" setup>
  import { ref, watch,defineProps, onMounted } from 'vue';
  import type { TreeSelectProps } from 'ant-design-vue';
  import { TreeSelect } from 'ant-design-vue';
  import { getAllTree } from '#/api';

  // 接收外部传入的 className
  const props = defineProps<{
    className: string;
  }>();

  const value = ref<string>();
  const treeData = ref<TreeSelectProps['treeData']>([]);

  // 监听 value 变化
  watch(value, (newVal) => {
    console.log("选中的值:", newVal);
  });

  // 加载树结构数据
  const loadTree = async () => {
    const res = await getAllTree({ className: props.className });
    treeData.value = transformMenuData(res);
  };

  // 转换树结构数据格式
  const transformMenuData = (menuList: any[]): any[] => {
    return menuList.map(item => ({
      label: props.className==='com.gumo.entity.Menu'?item.meta.title:item.name,
      value: item.pid,
      children: item.children ? transformMenuData(item.children) : [],
    }));
  };

  // 组件挂载后加载数据
  onMounted(() => {
    loadTree();
  });
</script>
